<template>
  <div class="infoName">
    <van-nav-bar class="top" left-arrow @click.native="toInfo">
      <template #right>
        <div class="save" @click="btnsave">保存</div>
      </template>
      <template #left>
        <span class="iconfont">&#xe632;</span>
      </template>
      <template #title>
        <span class="gerenxinxi">修改昵称</span>
      </template>
    </van-nav-bar>
    <van-cell-group>
      <van-field v-model="value" class="field" />
    </van-cell-group>
  </div>
</template>

<script>
import { Profile } from '@/api/my.js'
import { mapState } from 'vuex'
export default {
  name: 'infoName',
  data () {
    return {
      value: '' // 输入框内容
    }
  },
  // 在钩子中传过来的昵称=输入框的值
  created () {
    this.value = this.userInfo.name
  },
  methods: {
    toInfo (str) {
      this.$router.push('/info')
    },
    // 保存
    btnsave () {
      this.editlnfo({
        name: this.value
      })
    },
    // 修改用户信
    editlnfo (obj) {
      this.$toast.loading({
        duration: 0
      })
      Profile(obj)
        .then(() => {
          this.$toast.success('修改资料成功')
          // 更新vuex中的userlnfo
          this.$store.dispatch('refreshUserInfo')
        })
        .catch(() => {
          this.$toast.error('修改资料失败')
        })
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.infoName {
  .top {
    background-color: #d0584d;
  }
  .field {
    background-color: #f3f3f3;
    padding-left: 15px;
  }
  .save {
    color: #f3f3f3;
  }
  .iconfont {
    color: #ffff;
  }
  .gerenxinxi {
    color: #ffffff;
  }
}
</style>
